<!--
 * @Descripttion: your project
 * @version: 1.0
 * @Author: hongweixun
 * @Date: 2022-07-14 15:28:18
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2025-05-06 11:18:22
-->
<template>
    <div class="modifyBox">
        <div class="modifyCont">
            <div class="hearderBox">
                <img :src="require('../assets/img/xian_zuo.png')" />
                <div class="name">{{ selectTitleName }}</div>
                <img :src="require('../assets/img/xian_you.png')" />
                <img class="closeIcon" @click="Close" :src="require('../assets/img/icon_close.png')" />
            </div>
            <div class="bottom-list-box">
                <div class="list-item">
                    <div class="table-title">
                        <span>序号</span>
                        <span>姓名</span>
                        <span>性别</span>
                        <span>班级</span>
                        <span>宿舍号</span>
                        <span>考勤状态</span>
                        <span v-if="Number(selectStatus) == 1 || Number(selectStatus) == 2">考勤设备</span>
                        <span v-if="Number(selectStatus) == 1 || Number(selectStatus) == 2">考勤时间</span>
                    </div>
                    <div class="table-data-box">
                        <div class="table-data-list"
                            v-for="(items, indexs) in studentList.slice((page - 1) * page_size, page * page_size)"
                            :key="indexs" @click="checkItem(items.id)"
                            :class="currentIndex == items.id ? 'active' : ''">
                            <img v-if="currentIndex == items.id" :src="require('../assets/img/icon_choose.png')" alt="">
                            <span>{{ indexs + 1 }}</span>
                            <span>{{ items.student_name }}</span>
                            <span>{{ items.gender }}</span>
                            <span>{{ items.class_name }}</span>
                            <span>{{ items.floor_name }}-{{ items.layer_name }}-{{ items.room_name }}-{{ items.bed_name
                                }}</span>
                            <span>{{ items.status }}</span>
                            <el-tooltip :content="items.device_name"
                                :disabled="items.device_name.length > 20 ? false : true"
                                v-if="Number(selectStatus) == 1 || Number(selectStatus) == 2" placement="top"
                                effect="light">
                                <span ref="remark" v-if="Number(selectStatus) == 1 || Number(selectStatus) == 2">
                                    {{ items.device_name ? items.device_name : '-' }}
                                </span>
                            </el-tooltip>
                            <span v-if="Number(selectStatus) == 1 || Number(selectStatus) == 2">
                                {{ items.attendance_time ? items.attendance_time : '-'
                                }}</span>
                        </div>
                    </div>
                    <!-- 当列表无数据的时候 -->
                    <div class="noDate" v-if="studentList.length == 0">
                        <img :src="require('../assets/img/ikon_no date.png')" alt="">
                        <div>暂无数据</div>
                    </div>
                    <!-- 翻页 -->
                    <div class="pageBox" v-if="studentList.length > 0">
                        <el-pagination background @current-change="((val) => { handleCurrentChange(val) })"
                            layout="total,prev, pager, next" :total="studentList.length" :current-page="page"
                            :page-size="10">
                        </el-pagination>
                        <div class="butBox" @click="Export">导出数据</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
    props: {
        studentList: {
            type: Array,
            default: []
        },
        selectTitleName: {
            type: String,
            default: ''
        },
        selectStatus: {
            type: String | Number,
            default: ''
        },
    },
    data() {
        return {
            page: 1,
            page_size: 10,
            currentIndex: '',
            // total: 22
            isShowTooltip: false
        }
    },
    methods: {
        checkItem(id) {
            this.currentIndex = id
        },
        handleCurrentChange(val) {
            this.page = val
        },
        Close() {
            this.$emit('CloseDialog')
        },
        Export() {
            this.$emit('ExportDate')
        }
    },
    async mounted() {
    }
}
</script>
<style lang="less" scoped>
.modifyBox {
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: auto;
    margin: 0;
    z-index: 9999;

    .modifyCont {
        // min-width: 720px;
        // max-width: 820px;
        height: 710px;
    background: #00124B;
        box-shadow: inset 0px 0px 40px 1px #0053B0;
        border-radius: 10px 10px 10px 10px;
        border: 1px solid #14489D;
        position: absolute;
        // left: 50%;
        // margin-left: -360px;
        // top: 50%;
        // margin-top: -356px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        cursor: pointer;

        .hearderBox {
            height: 60px;
            display: flex;
            align-items: center;
            background: linear-gradient(90deg, rgba(48, 97, 219, 0) 0%, rgba(48, 97, 219, 0.48) 33%, rgba(48, 97, 219, 0.5) 70%, rgba(48, 97, 219, 0) 100%);
            justify-content: center;
            position: relative;

            .name {
                height: 26px;
                font-size: 20px;
                font-weight: bold;
                color: #00FFFC;
                margin: 0 32px;
            }

            img {
                width: 125px;
                height: 19px
            }

            img.closeIcon {
                position: absolute;
                top: 17px;
                right: 24px;
                width: 28px;
                height: 28px;
                cursor: pointer;
            }
        }

        .bottom-list-box {
            display: flex;

            .list-item {
                flex: 1;
                width: 100%;
                // background: url('../assets/img/bg_line.png') no-repeat;
                // background-size: 100% 100%;
                height: 650px;
                text-align: center;
                position: relative;
                cursor: pointer;

                .title {
                    font-size: 24px;
                    font-weight: bold;
                    color: #63F2FF;
                    width: 100%;
                    height: 60px;
                    line-height: 60px;
                    // background: url('../assets/img/bg_mingdanbiaoti.png') no-repeat;
                    background-size: 100% 100%;
                }

                .table-title {
                    display: flex;
                    align-items: center;
                    height: 44px;
                    line-height: 44px;
                    font-size: 14px;
                    color: #6BDDF8;
                    margin-bottom: 10px;
                    padding: 0 30px;
                    background: linear-gradient(360deg, rgba(0, 67, 191, 0.41) 0%, rgba(0, 67, 191, 0) 100%);

                    span {
                        display: inline-block;
                        text-align: center;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        -o-text-overflow: ellipsis;
                    }

                    span:nth-of-type(1) {
                        width: 60px;
                    }

                    span:nth-of-type(2) {
                        width: 80px;
                    }

                    span:nth-of-type(3) {
                        width: 80px;
                    }

                    span:nth-of-type(4) {
                        width: 180px;
                    }

                    span:nth-of-type(5) {
                        width: 140px;
                    }

                    span:nth-of-type(6) {
                        flex: 100px;
                    }

                    span:nth-of-type(7) {
                        width: 280px;
                    }

                    span:nth-of-type(8) {
                        width: 180px;
                    }
                }

                .table-data-box {
                    padding: 0 30px;
                }

                .table-data-list {
                    font-size: 14px;
                    font-weight: 400;
                    padding: 12px 0;
                    // margin: 4px 0;
                    display: flex;
                    align-items: center;
                    position: relative;
                    cursor: pointer;
                    color: #ffffff;

                    img {
                        display: inline-block;
                        width: 16px;
                        height: 16px;
                        position: absolute;
                        left: 0;
                    }

                    span {
                        display: inline-block;
                        text-align: center;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        -o-text-overflow: ellipsis;
                    }

                    span:nth-of-type(1) {
                        width: 60px;
                    }

                    span:nth-of-type(2) {
                        width: 80px;
                    }

                    span:nth-of-type(3) {
                        width: 80px;
                    }

                    span:nth-of-type(4) {
                        width: 180px;
                    }

                    span:nth-of-type(5) {
                        width: 140px;
                    }

                    span:nth-of-type(6) {
                        flex: 100px;
                    }

                    span:nth-of-type(7) {
                        width: 280px;
                    }

                    span:nth-of-type(8) {
                        width: 180px;
                    }
                }

                .table-data-list:last-of-type {
                    margin-bottom: 0px;
                }

                .table-data-list.active {
                    color: #41F3FE;
                    background-image: linear-gradient(90deg, rgba(16, 40, 73, 0) 0%, rgba(107, 221, 248, 0.5) 51%, rgba(16, 40, 73, 0) 100%);
                }

                .noDate {
                    position: relative;
                    top: 50%;
                    transform: translateY(-50%);
                    margin-top: -70px;

                    /* 元素往下位移自身高度50%的距离 */
                    img {
                        width: 160px;
                        height: 120px;
                        display: inline-block;
                    }

                    div {
                        font-size: 14px;
                        font-weight: 500;
                        color: #7584B2;
                        margin-top: 10px;
                    }
                }

                .pageBox {
                    position: absolute;
                    bottom: 20px;
                    // display: flex;
                    width: 100%;

                    .butBox {
                        width: 92px;
                        height: 40px;
                        line-height: 40px;
                        background: #126CFE;
                        border-radius: 6px;
                        color: #ffffff;
                        margin: 0 auto;
                        margin-top: 20px;
                    }

                    /deep/ .el-pagination {
                        margin: auto;
                    }

                    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
                    background: linear-gradient(180deg, rgba(11, 37, 73, 0) 0%, #1B5AB3 100%);
                        border-radius: 4px;
                    border: 1px solid #41F3FE;
                        color: #41F3FE;
                    }

                    /deep/ .el-pagination.is-background .el-pager li {
                        background: #042964;
                        border-radius: 4px;
                        border: 1px solid #4B5C91;
                        color: #D2F2FF;
                    }

                    /deep/ .el-pagination__total {
                        font-weight: 500;
                        color: #D2F2FF;
                    }

                    /deep/ .el-pagination.is-background .btn-prev:disabled,
                    .el-pagination.is-background .btn-prev {
                        background: #042964;
                        border-radius: 4px;
                        border: 1Px solid #4B5C91;
                    }

                    /deep/ .el-pagination.is-background .btn-prev {
                        background: #042964;
                        border-radius: 4px;
                        border: 1px solid #4B5C91;
                    }

                    /deep/ .el-pagination.is-background .btn-next {
                        background: #042964;
                        border-radius: 4px;
                        border: 1px solid #4B5C91;
                    }

                    /deep/ .el-pagination .btn-prev .el-icon {
                        color: #D2F2FF;
                    }

                    /deep/ .el-pagination .btn-next .el-icon {
                        color: #D2F2FF;
                    }
                }
            }

            .list-item:nth-of-type(2) {
                margin: 0 20px;
            }
        }
    }
}
</style>
<style>
.el-tooltip__popper.is-light {
    z-index: 9999999 !important;
    background: #ffffff !important;
    color: #0A1EA5 !important;
    font-size: 14px !important;
}

/* .el-tooltip__popper .popper__arrow::after{
    border-color: #ffffff;
} */
</style>